<script setup lang="ts">
import { computed, ref, watch } from "vue";
import { onLoad, onPageScroll } from "@dcloudio/uni-app";
import { queryRankingList, getRankingListRelease, getRankingListItemsByReleaseId } from "@/api/lawyer";
import { handleToPage } from "@/utils";

const list = ref([]);

const category = ref([]);
const cateActiveIdx = ref(null);
function handleSwiperChange(e) {
  cateActiveIdx.value = e.detail.current;
}

const tabs = computed(() => {
  if(category.value.length == 0) {
    return [];
  }
  return category.value[cateActiveIdx.value].children.map(item => {
    return {
      "id": item.id,
      "label": item.rankingName,
    };
  });
});
const tabsActiveIdx = ref(0);

watch(cateActiveIdx, (newIdx) => {
  tabsActiveIdx.value = 0;
}, { deep: true });

/** 榜单ID  */
const releaseId = computed(() => {
  if(category.value.length == 0) {
    return null;
  }
  if(category.value[cateActiveIdx.value].children.length == 0) {
    return category.value[cateActiveIdx.value].id;
  } else {
    return category.value[cateActiveIdx.value].children[tabsActiveIdx.value].id;
  }
});

watch(releaseId, (newId) => {
  if(newId){
    getRankingListItemsByReleaseId(newId).then((data) => {
      list.value = data;
    });
  }
});

function formatImage(url) {
  if (url) {
    return `${import.meta.env.VITE_API_URL}${url}`
  }else {
    return 'https://static.minglvtang.com/images/placeholder/man.png'
  } 
}

// 页面加载
onLoad(() => {
  getRankingListRelease().then((data) => {
    category.value = data;
    cateActiveIdx.value = 0;
  });
});

// 吸顶变色
const isScrolled = ref(false);
onPageScroll((e)=>{
  isScrolled.value = e.scrollTop > 0;
});
</script>

<template>
  <view class="wrap overflow-auto relative">
    <swiper class="h-47" circular previous-margin="120rpx" next-margin="120rpx" @change="handleSwiperChange">
      <swiper-item v-for="(item, index) in category" :key="item.id">
        <view class="font-bold text-(base transparent) h-full flex flex-col justify-end py-7 box-border">
          <view class="relative text-center" :class="{'title': index == cateActiveIdx}">
            <view class="bg-(clip-text gradient-to-b) from-[#1C73E7] to-[#12141A]">{{ item.rankingName.split('：')[0] }}</view>
            <view class="bg-(clip-text gradient-to-b) from-[#1C73E7] to-[#12141A]" v-if="item.rankingName.split('：').length > 1">{{ item.rankingName.split('：')[1] }}</view>
            <view class="h-4" v-else></view>
          </view>
        </view>
      </swiper-item>
    </swiper>
    
    <image class="w-14 absolute top-42 right-0" src="https://static.minglvtang.com/images/btn_rule.png" mode="widthFix" @click="handleToPage(`/pages/lawyer/ranking-rules`)" />

    <view class="my-1 overflow-x-auto scrollbar-hide">
      <view class="w-fit flex gap-2 px-4 py-3">
        <view
          class="rounded-lg px-3 py-1 box-border break-keep text-sm"
          :class="[tabsActiveIdx == index ? 'text-#1373FF bg-white' : 'text-black/80 bg-white/60']"
          v-for="(item, index) in tabs" :key="index"
          @click="tabsActiveIdx = index"
        >
          {{ item.label }}
        </view>
      </view>
    </view>

    <page-list :list="list" :hasMore="false" :isLoading="false">
      <view class="relative mx-4 mb-5 p-3 bg-white rounded-lg grid gap-2 grid-cols-3" v-for="(item, index) in list" :key="item.id" @click="handleToPage(`/pages/lawyer/detail?id=${item.lawyerId}`)">
        <image class="w-10 absolute -top-1 -left-1 z-1" src="https://static.minglvtang.com/images/icons/first.png" mode="widthFix" v-if="item.groupType == 1" />
        <image class="w-10 absolute -top-1 -left-1 z-1" src="https://static.minglvtang.com/images/icons/second.png" mode="widthFix" v-if="item.groupType == 2" />
        <image class="w-10 absolute -top-1 -left-1 z-1" src="https://static.minglvtang.com/images/icons/third.png" mode="widthFix" v-if="item.groupType == 3" />
        <image class="w-25 h-32 align-middle rounded-md row-span-5" :src="formatImage(item.lawyerCover)" mode="aspectFill" />
        <view class="flex flex-wrap items-center gap-2 col-span-2">
          <view class="text-(sm black/80)">{{item.lawyerFullname}}</view>
          <view class="border-(~ solid #1373FF) text-(xs #1373FF) px-1 rounded-full">{{item.lawyerJoblevel}}</view>
        </view>
        <view class="flex items-center col-span-2">
          <image class="w-3 h-3 align-middle mr-0.5" src="https://static.minglvtang.com/images/icons/agency.png" mode="aspectFill" />
          <view class="text-(xs black/80) line-clamp-1">{{item.lawfirmName}}</view>
        </view>
        <view class="text-(xs #3D3D3D) line-clamp-2 col-span-2 row-span-2">{{item.lawyerSpeciality}}</view>
        <view class="flex items-center col-span-2 gap-2">
          <uni-rate readonly allow-half :size="18" color="#eeeff1" active-color="#FBAD38" :value="item.rating" />
          <view class="text-(xs black/60)">{{item.rating}}</view>
        </view>

        <view class="bg-#1373FF/8 p-2 flex items-center gap-1 rounded-md col-span-3">
          <image class="w-3 h-3 align-middle mr-0.5" src="https://static.minglvtang.com/images/icons/great_blue.png" mode="aspectFill" />
          <view class="text-(xs #253851) line-clamp-1">{{item.evaluate}}</view>
        </view>
      </view>
    </page-list>

  </view>
</template>

<style>
page {
  background: linear-gradient(#CDE2FF, #F6F8FA 50%);
  background-repeat: no-repeat;
}
.wrap {
  background-image: url('https://static.minglvtang.com/images/bg_ranking.png');
  background-position: top;
  background-size: contain;
  background-repeat: no-repeat;
}
.title:before,
.title:after { 
  content: '';
  width: 64rpx;
  height: 64rpx;
  position: absolute;
  bottom: 0;
  transform: translateY(-50%);
  background-size: contain;
  background-repeat: no-repeat;
}
.title:before {
  left:0;
  background-image: url('https://static.minglvtang.com/images/title_before.png');
}
.title:after {
  right:0;
  background-image: url('https://static.minglvtang.com/images/title_after.png');
}
</style>
